<script setup>
import { ref, reactive, toRefs, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import Table from '@/components/Table/index.vue';
import ComponentColumn from '@/components/ComponentColumn/index.vue';
import ActionButton from './ActionButton.vue';
import Pagination from '@/components/Pagination/index.vue';
import { getQueryPageList } from '@/server/api/biz.js';
const props = defineProps({
  bomData: {
    type: Array,
    default: [],
  },
  fileId: {
    type: String,
  },
  // 是否展示操作按钮
  showOperation: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(['getAlldata', 'getStatisticalData', 'getUnmatchedTotal', 'getTableData']);
const total = ref(20);
const changeTypeVisible = ref(false); // 更换型号弹窗
const columns = computed(() => {
  const tableColumns = [
    {
      label: t('om.BOMModel'),
      prop: 'manufacturerPn',
      width: '150px',
    },
    {
      label: t('om.BOMBit'),
      prop: 'designator',
      width: '120px',
    },
    {
      label: t('om.Branding'),
      prop: 'manufacturer',
      width: '100px',
    },
    {
      label: t('om.Componentparameters'),
      prop: 'description',
      width: '215px',
    },
    {
      label: t('om.RecommendedComponents'),
      prop: 'recommendedComponents',
      type: 'img',
      width: '300px',
    },
    {
      label: t('om.Dosage'),
      prop: 'dosage',
      width: '80px',
    },
    {
      label: t('om.Subtotalpurchases'),
      prop: 'totalAmount',
      width: '100px',
    },
  ];
  if (props.showOperation) {
    tableColumns.push({
      label: t('smt.Operational'),
      fixed: 'right',
      type: 'btn',
      width: '100px',
    });
  }
  return tableColumns;
});

const pagesNum = ref(1);

const updateData = () => {
  emit('getAlldata');
  emit('getStatisticalData');
  getUnmatchedTableData(pagesNum.value, 10);
};

const getList = (page, limit) => {
  pagesNum.value = page;
  getUnmatchedTableData(page, limit);
};

let unmatchedTableData = ref({});
/**
 * 获取未匹配表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getUnmatchedTableData = async (current = 1, pageSize = 10) => {
  const obj = {
    bomFileId: props.fileId,
    current: current,
    pageSize: pageSize,
    patchStatus: 1,
    similarity: 2,
    status: '',
  };
  const res = await getQueryPageList(obj);
  if (res.code == 200) {
    unmatchedTableData.value = res.data;
    emit('getUnmatchedTotal', res.data.total);
    emit('getTableData', unmatchedTableData.value);
    console.log(unmatchedTableData.value);
  } else {
    ElMessage.error(res.msg);
  }
};
defineExpose({
  getUnmatchedTableData,
});
onMounted(() => {
  getUnmatchedTableData();
});

const handleChangeModel = () => {
  console.log(66666);
  changeTypeVisible.value = true;
};
</script>
<template>
  <div class="table-wrap">
    <h2>{{ $t('om.UnmatchedComponents') }}</h2>
    <Table
      v-loading="loading"
      :data="unmatchedTableData.records"
      :columns="columns"
      serial
      :serialOptions="{ pageNum: unmatchedTableData.current, pageSize: unmatchedTableData.size }"
    >
      <template #imgSlot="{ scope }">
        <!-- 推荐元件 -->
        <component-column :row="scope.row" />
      </template>
      <template #btnSlot="{ scope }">
        <ActionButton :scope="scope" @updateData="updateData" @changeModel="handleChangeModel" />
      </template>
    </Table>
    <div style="display: flex; flex-direction: row-reverse">
      <Pagination
        class="m-b-10"
        v-show="Number(unmatchedTableData.total) > 0"
        :total="Number(unmatchedTableData.total)"
        v-model:page="unmatchedTableData.pages"
        v-model:limit="unmatchedTableData.size"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.table-wrap {
  padding-top: 24px;
  h2 {
    color: var(--mall-text-color-primary);
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 12px;
  }
}
</style>
